<template>
  <el-tabs type="border-card">
    <el-tab-pane :label="$t('pagePerformanceMonitor.currentStatus')">
      <el-row
        v-if="Object.keys(hostStatus).length"
        type="flex"
        justify="space-around"
      >
        <el-col v-if="hostStatus.CPU.CPU" class="flex-1">
          <h2 class="text-base font-semibold leading-7 text-gray-900">CPU</h2>
          <performance-monitor-panel
            ref="CPU"
            comp-name="CPU"
            :current-data="hostStatus.CPU.CPU[hostStatus.CPU.CPU.length - 1]"
          />
        </el-col>
        <el-col v-if="hostStatus.Memory.Memory" class="flex-1">
          <h2 class="text-base font-semibold leading-7 text-gray-900">
            {{ $t('pagePerformanceMonitor.Memory') }}
          </h2>
          <performance-monitor-panel
            ref="Memory"
            comp-name="Memory"
            :current-data="
              hostStatus.Memory.Memory[hostStatus.Memory.Memory.length - 1]
            "
          />
        </el-col>
      </el-row>
      <el-row v-if="hostStatus.hasOwnProperty('Disk')">
        <el-col>
          <h2 class="text-base font-semibold leading-7 text-gray-900">
            {{ $t('pagePerformanceMonitor.Disk') }}
          </h2>
        </el-col>
        <el-col
          v-for="(allData, compName) in hostStatus.Disk"
          :key="compName"
          :span="6"
        >
          <performance-monitor-panel
            ref="Disk"
            :comp-name="compName"
            :current-data="allData[allData.length - 1]"
          />
        </el-col>
      </el-row>
      <el-row v-if="hostStatus.hasOwnProperty('NetInterface')">
        <h2 class="text-base font-semibold leading-7 text-gray-900">
          {{ $t('pagePerformanceMonitor.NetInterface') }}
        </h2>
        <el-col class="ml-10">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column
              prop="nicName"
              :label="$t('pagePerformanceMonitor.nicName')"
            />
            <el-table-column
              prop="downSpeed"
              :label="$t('pagePerformanceMonitor.downSpeed')"
            />
            <el-table-column
              prop="upSpeed"
              :label="$t('pagePerformanceMonitor.upSpeed')"
            />
          </el-table>
        </el-col>
      </el-row>
    </el-tab-pane>
    <!-- <template v-for="(historyData, hardwareName) in hostStatus"> 
    </template> -->

    <el-tab-pane :label="$t('pagePerformanceMonitor.history')">
      <el-row>
        <el-col :span="4">
          <el-select
            v-model="selected"
            class="m-2"
            placeholder="Select"
            size="large"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-col>
      </el-row>
      <el-row
        v-for="(historyData, hardwareName) in hostStatus"
        :key="hardwareName"
      >
        <el-col :cols="12">
          <div v-if="historyData.length" class="text-center font-bold">
            {{ historyBlockName(hardwareName) }}
          </div>
        </el-col>
        <el-col
          v-for="(allData, compName) in historyData"
          :key="compName"
          :sm="12"
          :md="12"
          :lg="8"
          :xl="8"
        >
          <performance-monitor-history-chart
            v-if="allData"
            :hardware-name="compName"
            :history-data="allData"
            :selected="selected"
            :hardware-type="hardwareName"
          />
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
  <el-dialog v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header flex flex-row justify-between">
        <h4 :id="titleId" :class="titleClass">
          {{ $t('global.status.warning') }}
        </h4>
        <el-button type="danger" @click="close">
          <el-icon class="el-icon--left"><circle-close-filled /></el-icon>
          {{ $t('pageServerPowerOperations.shutDown') }}
        </el-button>
      </div>
    </template>
    {{ $t('pagePerformanceMonitor.msgBox.missHardware') }}
  </el-dialog>
</template>

<script setup lang="ts">
import PerformanceMonitorPanel from './PerformanceMonitorPanel.vue';
import PerformanceMonitorHistoryChart from './PerformanceMonitorHistoryChart.vue';
import { usePerformanceMonitorStore } from '@/store/SystemManagement/PerformanceMonitor/PerformanceMonitorStore';
import { useI18n } from 'vue-i18n';
import { CircleCloseFilled } from '@element-plus/icons-vue';

const visible = ref(false);
const i18n = useI18n();
const performanceMonitorStore = usePerformanceMonitorStore();

const timer = ref();
const selected = ref('15 minutes');
const options = computed(() => [
  {
    value: '48 hours',
    text: i18n.t('pagePerformanceMonitor.options.h48'),
  },
  {
    value: '24 hours',
    text: i18n.t('pagePerformanceMonitor.options.h24'),
  },
  {
    value: '12 hours',
    text: i18n.t('pagePerformanceMonitor.options.h12'),
  },
  { value: '1 hour', text: i18n.t('pagePerformanceMonitor.options.h1') },
  {
    value: '15 minutes',
    text: i18n.t('pagePerformanceMonitor.options.m15'),
  },
]);
const hostStatus = computed(() => {
  const tmp = performanceMonitorStore.hostStatus;
  delete tmp.SysInfo;
  return tmp;
});

const roundToTwoDecimals = (num: number) => {
  return Math.round(num * 100) / 100;
};

const tableData = computed(() => {
  let temp = [];
  for (let nicName in hostStatus.value.NetInterface) {
    temp.push({
      nicName:
        hostStatus.value.NetInterface[nicName][
          hostStatus.value.NetInterface[nicName].length - 1
        ].nicName +
        hostStatus.value.NetInterface[nicName][
          hostStatus.value.NetInterface[nicName].length - 1
        ].unit,
      downSpeed:
        roundToTwoDecimals(
          hostStatus.value.NetInterface[nicName][
            hostStatus.value.NetInterface[nicName].length - 1
          ].downSpeed,
        ) +
        hostStatus.value.NetInterface[nicName][
          hostStatus.value.NetInterface[nicName].length - 1
        ].unit,
      upSpeed:
        roundToTwoDecimals(
          hostStatus.value.NetInterface[nicName][
            hostStatus.value.NetInterface[nicName].length - 1
          ].upSpeed,
        ) +
        hostStatus.value.NetInterface[nicName][
          hostStatus.value.NetInterface[nicName].length - 1
        ].unit,
    });
  }
  return temp;
});

const historyBlockName = (hardwareName: string | number) => {
  let title = '';
  switch (hardwareName) {
    case 'CPU':
      title = 'CPU';
      break;
    case 'Memory':
      title = i18n.t('pagePerformanceMonitor.Memory');
      break;
    case 'Disk':
      title = i18n.t('pagePerformanceMonitor.Disk');
      break;
    case 'NetInterface':
      title = i18n.t('pagePerformanceMonitor.NetInterface');
      break;
  }
  return title;
};

onBeforeUnmount(() => {
  clearInterval(timer.value);
});
onMounted(() => {
  performanceMonitorStore.getHostStatus().catch(() => {
    clearInterval(timer.value);
    visible.value = true;
  });

  timer.value = setInterval(() => {
    performanceMonitorStore.getHostStatus().catch(() => {
      clearInterval(timer.value);
      visible.value = true;
    });
  }, 30000);
});
</script>
